<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="images/5.icon" rel="icon" type="image/x-icon"/>
    <meta charset="utf-8">
    <title>详细情况</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: whitesmoke
        }

        .tf {

            margin: 100px auto;
            background-color: #f1f1f1;
            width: 700px;
            border-top: 1px solid #CCCCCC;

        }

        .tf0 {
            width: 300px;
            height: 50px;
            margin: 30px auto;
            background-color: deepskyblue;
            text-align: center;
            border-radius: 150px;
            color: white;

        }

        #tf0 {
            background-color: deepskyblue;
        }

        .tf1 {
            background-color: #f1f1f1;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf1 li {
            display: inline-block;
            margin: 20px;
            text-decoration: none;
            background-color: #f1f1f1;
        }

        .tf2 {
            background-color: #f1f1f1;
            width: 700px;
            height: 70px;
            display: inline-block;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf2 li {
            display: inline-block;
            margin: 22.5px;
            text-decoration: none;
            background-color: #f1f1f1;
        }

        .tf2 li a {
            padding-right: 30px;
            text-decoration: none;
            color: blue;
        }

        .tf2 li a:hover {
            color: red;

        }

        .tf3 {
            background-color: #f1f1f1;
            width: 700px;
            height: 70px;
            display: inline-block;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf3 li {
            display: inline-block;
            margin: 22.5px;
            text-decoration: none;
            background-color: #f1f1f1;
        }

        .tf3 li a {
            padding-right: 30px;
            text-decoration: none;
            color: blue;
        }

        .tf3 li a:hover {
            color: red;
        }

        .tf4 {
            background-color: #f1f1f1;
            width: 700px;
            height: 70px;
            display: inline-block;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf4 li {
            display: inline-block;
            margin: 22.5px;
            text-decoration: none;
            background-color: #f1f1f1;
        }

        .tf4 li a {
            padding-right: 30px;
            text-decoration: none;
            color: blue;
        }

        .tf4 li a:hover {
            color: red;
        }

        .tf5 {
            background-color: #f1f1f1;
            width: 700px;
            height: 70px;
            display: inline-block;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf5 li {
            display: inline-block;
            margin: 22.5px;
            text-decoration: none;
            background-color: #f1f1f1;

        }

        .tf5 li a {
            padding-right: 30px;
            text-decoration: none;
            color: blue;
        }

        .tf5 li a:hover {
            color: red;
        }

        .tf6 {
            background-color: #f1f1f1;
            width: 700px;
            height: 70px;
            display: inline-block;
            border-bottom: 1px solid #CCCCCC;
        }

        .tf6 li {
            display: inline-block;
            margin: 22.5px;
            text-decoration: none;
            background-color: #f1f1f1;
        }

        .tf6 li a {
            padding-right: 30px;
            text-decoration: none;
            color: blue;
        }

        .tf6 li a:hover {
            color: red;
        }

        h1 {

            font-weight: normal;
        }

		.tfAll {
			background-color: #f1f1f1;
			width: 700px;
			height: 70px;
			display: inline-block;
			border-bottom: 1px solid #CCCCCC;
		}

		.tfAll li {
			display: inline-block;
			margin: 22.5px;
			text-decoration: none;
			background-color: #f1f1f1;
		}

		.tfAll li a {
			padding-right: 30px;
			text-decoration: none;
			color: blue;
		}

		.tfAll li a:hover {
			color: red;
		}


	</style>
</head>
<body>
<input hidden id="unitId" th:value="${unitId}">
<div class="tf" id="tf">

    <div class="tf0" id="tf0">
        <h1>详细情况</h1>

    </div>
    <div id="packages">

    </div>
    <center><button type="button" id="goBackYiyuan" style="width: 80px; height: 40px">返回</button></center>
</div>
<script src="js/jquery.js"></script>
<script>
    let unitId=$("#unitId").val();
    $("document").ready(function () {
        $.ajax({
            url: "/getUnitPackages",
            dataType: "json",
            type: "get",
            data: "unitId=" + unitId,
            success: function (responseData) {
                console.log("套餐");
                console.log(responseData);
                $("#packages").html("").append("<div class='tfAll'><ul>" +
                    "<li><h3>套餐名称</h3></li><li><h3>适用群体</h3></li><li><h3>适用性别</h3></li><li><h3>价格</h3></li></ul></div>");
                for (let i = 0; i < responseData.length; i++) {
                    $("#packages").append("<div class='tfAll'><ul>" +
                        "<li>" + responseData[i].packageName + "</li>" +
                        "<li>" + responseData[i].applyRange + "</li>" +
                        "<li>" + responseData[i].applySex + "</li>" +
                        "<li>" + responseData[i].price + "</li>" +
                        "<li><a href='/mingxi?examinePackageId="+responseData[i].examinePackageId+"&unitId="+unitId+"'>查看</a></li></ul></div>")
                }
            },
            error: function () {
                console.log("获取套餐列表请求失败！");
            }
        })
    });

    $("#goBackYiyuan").on("click", function(){
        window.location.href="/yiyuan";
    })

</script>

</body>
</html>
